<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <link
            rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
            integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
            crossorigin="anonymous"
        />
        <!-- Bootstrap CSS -->
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
        />
        <link rel="stylesheet" href="/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="/dist/css/style.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-expand-md navbar-light fixed-top py-4" id="main-nav">
            <div class="container">
                <a href="#home" class="navbar-brand">
                    <img src="img/mlogo.png" width="50" height="50" alt="" />
                    <h3 class="d-inline align-middle">Mizuxe</h3>
                </a>
                <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a href="#home" class="nav-link">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="#about" class="nav-link">About</a>
                        </li>
                        <li class="nav-item">
                            <a href="#authors" class="nav-link">Meet The Authors</a>
                        </li>
                        <li class="nav-item">
                            <a href="#contact" class="nav-link">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- showcase  -->
        <section id="showcase" class="py-5">
            <div class="primary-overlay text-white">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 text-center">
                            <h1 class="display-2 mt-5 pt-5">
                                Do What You Dream Of...
                            </h1>
                            <p class="lead">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam,
                                tempora!
                            </p>
                            <a href="#" class="btn btn-outline-secondary btn-lg text-white">
                                <i class="fas fa-arrow-right"></i> Read More
                            </a>
                        </div>
                        <div class="col-lg-6 d-none d-lg-block">
                            <img src="img/book.png" alt="" class="img-fluid " />
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="newsletter" class="bg-dark color-light p-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <input
                                type="text"
                                class="form-control form-control-lg"
                                placeholder="Enter Name"
                            />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <input
                                type="text"
                                class="form-control form-control-lg mr-2"
                                placeholder="Enter Email"
                            />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <button class="btn btn-primary btn-lg text-light btn-block">
                            Subscribe
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <section id="boxes" class="py-5 bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-sm-6 mb-5 mb-sm-3 mb-lg-0">
                        <div class="card ">
                            <div class="card-body">
                                <h3 class="text-primary">Be better</h3>
                                <p>
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad
                                    cumque temporibus magnam unde magni corporis nulla aperiam
                                    atque, quasi quas laborum corrupti vel architecto. Provident
                                    sint repudiandae id neque voluptatem.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 mb-5 mb-sm-3 mb-lg-0">
                        <div class="card bg-primary text-light">
                            <div class="card-body">
                                <h3>Be better</h3>
                                <p>
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad
                                    cumque temporibus magnam unde magni corporis nulla aperiam
                                    atque, quasi quas laborum corrupti vel architecto. Provident
                                    sint repudiandae id neque voluptatem.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 mb-5 mb-sm-3 mb-lg-0">
                        <div class="card">
                            <div class="card-body">
                                <h3 class="text-primary">Be Faster</h3>
                                <p>
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad
                                    cumque temporibus magnam unde magni corporis nulla aperiam
                                    atque, quasi quas laborum corrupti vel architecto. Provident
                                    sint repudisandae id neque voluptatem.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 mb-5 mb-sm-3 mb-lg-0">
                        <div class="card bg-primary text-light">
                            <div class="card-body">
                                <h3>Be Stronger</h3>
                                <p>
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad
                                    cumque temporibus magnam unde magni corporis nulla aperiam
                                    atque, quasi quas laborum corrupti vel architecto. Provident
                                    sint repudiandae id neque voluptatem.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ABOUT / WHY SECTION -->
        <section id="about" class="py-5 text-center bg-light">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="info-header mb-5">
                            <h1 class="text-primary pb-3">
                                Why This Book?
                            </h1>
                            <p class="lead pb-3">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
                                obcaecati alias rerum dolore fugiat debitis?
                            </p>
                        </div>

                        <!-- ACCORDION -->
                        <div id="accordion">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        <div
                                            href="#collapse1"
                                            data-toggle="collapse"
                                            data-parent="#accordion"
                                        >
                                            <i class="fas fa-arrow-circle-down"></i> Get Inspired
                                        </div>
                                    </h5>
                                </div>

                                <div id="collapse1" class="collapse show">
                                    <div class="card-body">
                                        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                                        Impedit odit laborum qui, debitis, sequi dolores nobis
                                        mollitia labore quasi earum laboriosam nihil cupiditate
                                        magnam iusto nostrum doloremque accusantium repudiandae
                                        expedita autem et, repellendus suscipit consequatur! Alias,
                                        maiores amet sunt ab inventore illo, deleniti facilis
                                        consequatur tenetur nam pariatur fuga nisi!
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        <div
                                            href="#collapse2"
                                            data-toggle="collapse"
                                            data-parent="#accordion"
                                        >
                                            <i class="fas fa-arrow-circle-down"></i> Gain The
                                            Knowledge
                                        </div>
                                    </h5>
                                </div>

                                <div id="collapse2" class="collapse">
                                    <div class="card-body">
                                        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                                        Impedit odit laborum qui, debitis, sequi dolores nobis
                                        mollitia labore quasi earum laboriosam nihil cupiditate
                                        magnam iusto nostrum doloremque accusantium repudiandae
                                        expedita autem et, repellendus suscipit consequatur! Alias,
                                        maiores amet sunt ab inventore illo, deleniti facilis
                                        consequatur tenetur nam pariatur fuga nisi!
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        <div
                                            href="#collapse3"
                                            data-toggle="collapse"
                                            data-parent="#accordion"
                                        >
                                            <i class="fas fa-arrow-circle-down"></i> Open Your Mind
                                        </div>
                                    </h5>
                                </div>

                                <div id="collapse3" class="collapse">
                                    <div class="card-body">
                                        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                                        Impedit odit laborum qui, debitis, sequi dolores nobis
                                        mollitia labore quasi earum laboriosam nihil cupiditate
                                        magnam iusto nostrum doloremque accusantium repudiandae
                                        expedita autem et, repellendus suscipit consequatur! Alias,
                                        maiores amet sunt ab inventore illo, deleniti facilis
                                        consequatur tenetur nam pariatur fuga nisi!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- AUTHORS -->
        <section id="authors" class="my-5 text-center">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="info-header mb-5">
                            <h1 class="text-primary pb-3">
                                Meet The Authors
                            </h1>
                            <p class="lead">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
                                laborum numquam aperiam dolores a porro!
                            </p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <img
                                    src="img/person1.jpg"
                                    alt=""
                                    class="img-fluid rounded-circle w-50 mb-3"
                                />
                                <h3>Susan Williams</h3>
                                <h5 class="text-muted">Lead Writer</h5>
                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed
                                    commodi nostrum, ab libero voluptas officia.
                                </p>
                                <div class="d-flex justify-content-center">
                                    <div class="p-4">
                                        <a href="http://facebook.com">
                                            <i class="fab fa-facebook"></i>
                                        </a>
                                    </div>
                                    <div class="p-4">
                                        <a href="http://twitter.com">
                                            <i class="fab fa-twitter"></i>
                                        </a>
                                    </div>
                                    <div class="p-4">
                                        <a href="http://instagram.com">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <img
                                    src="img/person2.jpg"
                                    alt=""
                                    class="img-fluid rounded-circle w-50 mb-3"
                                />
                                <h3>Grace Smith</h3>
                                <h5 class="text-muted">Co-Writer</h5>
                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed
                                    commodi nostrum, ab libero voluptas officia.
                                </p>
                                <div class="d-flex justify-content-center">
                                    <div class="p-4">
                                        <a href="http://facebook.com">
                                            <i class="fab fa-facebook"></i>
                                        </a>
                                    </div>
                                    <div class="p-4">
                                        <a href="http://twitter.com">
                                            <i class="fab fa-twitter"></i>
                                        </a>
                                    </div>
                                    <div class="p-4">
                                        <a href="http://instagram.com">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <img
                                    src="img/person3.jpg"
                                    alt=""
                                    class="img-fluid rounded-circle w-50 mb-3"
                                />
                                <h3>John Doe</h3>
                                <h5 class="text-muted">Editor</h5>
                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed
                                    commodi nostrum, ab libero voluptas officia.
                                </p>
                                <div class="d-flex justify-content-center">
                                    <div class="p-4">
                                        <a href="http://facebook.com">
                                            <i class="fab fa-facebook"></i>
                                        </a>
                                    </div>
                                    <div class="p-4">
                                        <a href="http://twitter.com">
                                            <i class="fab fa-twitter"></i>
                                        </a>
                                    </div>
                                    <div class="p-4">
                                        <a href="http://instagram.com">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <img
                                    src="img/person4.jpg"
                                    alt=""
                                    class="img-fluid rounded-circle w-50 mb-3"
                                />
                                <h3>Kevin Swanson</h3>
                                <h5 class="text-muted">Designer</h5>
                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed
                                    commodi nostrum, ab libero voluptas officia.
                                </p>
                                <div class="d-flex justify-content-center">
                                    <div class="p-4">
                                        <a href="http://facebook.com">
                                            <i class="fab fa-facebook"></i>
                                        </a>
                                    </div>
                                    <div class="p-4">
                                        <a href="http://twitter.com">
                                            <i class="fab fa-twitter"></i>
                                        </a>
                                    </div>
                                    <div class="p-4">
                                        <a href="http://instagram.com">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="contact" class="bg-light py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9">
                        <h3>Get in touch</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione,
                            temporibus!
                        </p>
                        <form>
                            <div class="input-group input-group-lg mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-user"></i>
                                    </span>
                                </div>
                                <input type="text" class="form-control" placeholder="Name" />
                            </div>

                            <div class="input-group input-group-lg mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-envelope"></i>
                                    </span>
                                </div>
                                <input type="text" class="form-control" placeholder="Email" />
                            </div>

                            <div class="input-group input-group-lg mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-pencil-alt"></i>
                                    </span>
                                </div>
                                <textarea
                                    class="form-control"
                                    placeholder="Message"
                                    rows="5"
                                ></textarea>
                            </div>

                            <input
                                type="submit"
                                value="Submit"
                                class="btn btn-primary btn-block btn-lg"
                            />
                        </form>
                    </div>
                    <div class="col-lg-3 align-self-center">
                        <img src="img/mlogo.png" alt="" class="img-fluid" />
                    </div>
                </div>
            </div>
        </section>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script
            src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"
        ></script>
    </body>
</html>
